<template>
<div>
  <h2>主页详情</h2>
<!--  1.声明式导航-->
<!-- to的参数有两种：1.字符串2.Location对象 -->
<!--  tag属性：给标签设置类型-->
<!--  active-class属性：给标签设置被激活时的样式-->
<!--  <router-link to="/Home/movie" tag="button" active-class="active">电影</router-link>-->
<!--  <router-link to="/Home/Music" tag="button" active-class="active">音乐</router-link>-->

<!--  <router-link :to="{name:'Movie'}" tag="button" active-class="active">电影</router-link>-->
<!--  <router-link :to="{path:'/Home/Music'}" tag="button" active-class="active">音乐</router-link>-->

<!--  2.编程式导航-->
  <div>
    <button @click="toMovie">电影</button>
    <button @click="toMusic">音乐</button>
  </div>
  <router-view/>
</div>
</template>

<script>
export default {
  name: "Home",
  methods:{
    toMovie(){
      //字符串类型
      //如果push没有写处理失败的回调函数,就会返回失败的promise实例,抛出的错误就是失败promise的错
      this.$router.push('/home/movie',null,()=>{})
    },
    toMusic(){
      //location对象
      this.$router.push({name:'Music'},null,()=>{})
    }
  }
}
</script>

<style scoped>
.active{
  background-color: orange;
}
</style>